import { useNavigate } from "react-router-dom";
import "./index.scss";

const ListDetail = () => {
    let useNav = useNavigate()
    return (
        <div className="detail-container">
            <div className="min-h-screen bg-gray-100">
                <div className="flex items-center justify-between bg-blue-500 text-white py-3 px-4 rounded-t-lg top-bar">
                    <div className="flex items-center" onClick={() => {
                        useNav("/");
                    }}>
                        <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
                        </svg>
                        <h1 className="text-xl font-bold">跟单详情</h1>
                    </div>
                    <div className="flex items-center">
                        <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                    </div>
                </div>

                {/* User Info Card */}
                <div className="bg-gradient-to-r from-blue-400 to-blue-500 text-white rounded-lg p-4 mb-4 mt-2 data-margin">
                    <div className="flex items-center justify-between mb-4">
                        <div className="flex items-center">
                            <img src="https://placehold.co/80x80" alt="User Avatar" className="rounded-full mr-3" />
                            <div>
                                <h2 className="font-bold text-lg">炫迈回来</h2>
                                <p className="text-sm">粉丝870</p>
                            </div>
                        </div>
                        <button className="bg-red-500 text-white px-3 py-1 rounded-md text-sm font-medium">
                            +关注
                        </button>
                    </div>

                    <div className="grid grid-cols-3 gap-4 text-center">
                        <div>
                            <div className="text-xl font-bold">53250</div>
                            <div className="text-xs">累计中奖</div>
                        </div>
                        <div>
                            <div className="text-xl font-bold">98.61%</div>
                            <div className="text-xs">7日盈利</div>
                        </div>
                        <div>
                            <div className="text-xl font-bold">5中1</div>
                            <div className="text-xs">7日命中</div>
                        </div>
                    </div>
                </div>

                {/* Recent Bets */}
                <div className="bg-white rounded-lg p-4 mb-4">
                    <div className="flex items-center justify-between mb-3">
                        <h3 className="font-semibold">最近5单</h3>
                        <div className="flex space-x-2">
                            <div className="w-6 h-6 bg-black rounded-full"></div>
                            <div className="w-6 h-6 bg-red-500 rounded-full"></div>
                            <div className="w-6 h-6 bg-black rounded-full"></div>
                            <div className="w-6 h-6 bg-black rounded-full"></div>
                        </div>
                    </div>
                </div>

                {/* Bet Details Card */}
                <div className="bg-white rounded-lg p-4 mb-4">
                    <div className="flex items-center justify-between mb-4">
                        <div className="flex items-center">
                            <img src="https://placehold.co/30x30" alt="Sport Icon" className="mr-2" />
                            <h3 className="font-bold">竞彩足球2串1</h3>
                        </div>
                        <span className="text-sm text-gray-500">10-05 20:50截止</span>
                    </div>

                    <div className="flex items-center mb-4">
                        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-orange-500 mr-1" fill="currentColor" viewBox="0 0 20 20">
                            <path fillRule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.828a4 4 0 010-5.656z" clipRule="evenodd" />
                        </svg>
                    </div>

                    <div className="grid grid-cols-4 gap-2 mb-4">
                        <div className="text-center">
                            <div className="text-lg font-bold">10000元</div>
                            <div className="text-xs text-gray-500">自购</div>
                        </div>
                        <div className="text-center">
                            <div className="text-lg font-bold">8%</div>
                            <div className="text-xs text-gray-500">佣金比例</div>
                        </div>
                        <div className="text-center">
                            <div className="text-lg font-bold">53250.00元</div>
                            <div className="text-xs text-gray-500">奖金</div>
                        </div>
                        <div className="text-center">
                            <div className="text-lg font-bold">0.00元</div>
                            <div className="text-xs text-gray-500">佣金</div>
                        </div>
                    </div>
                </div>

                {/* Tab Navigation */}
                <div className="bg-white rounded-lg p-4 mb-4">
                    <div className="flex border-b border-gray-200 mb-4">
                        <div className="px-4 py-2 border-b-2 border-blue-500 text-blue-500 font-medium">
                            方案详情
                        </div>
                        <div className="px-4 py-2 text-gray-500">
                            跟单用户(0)
                        </div>
                    </div>

                    <div className="mb-4">
                        <div className="flex items-center mb-3">
                            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v6a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 002 2h2a2 2 0 002-2z" />
                            </svg>
                            <span className="font-medium">投注信息</span>
                        </div>

                        <div className="border border-gray-300 rounded">
                            <table className="w-full">
                                <thead>
                                    <tr className="bg-gray-50">
                                        <th className="py-2 px-3 text-left text-sm font-medium">场次</th>
                                        <th className="py-2 px-3 text-left text-sm font-medium">主队VS客队</th>
                                        <th className="py-2 px-3 text-left text-sm font-medium">玩法</th>
                                        <th className="py-2 px-3 text-left text-sm font-medium">赔率</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr className="border-t">
                                        <td className="py-2 px-3 text-sm">周日<br />7014<br />英超</td>
                                        <td className="py-2 px-3 text-sm">纽卡斯尔<br />2:0<br />诺丁汉</td>
                                        <td className="py-2 px-3 text-sm">让球胜平负(-1)</td>
                                        <td className="py-2 px-3 text-sm text-red-500">(-1)胜(2.13)</td>
                                    </tr>
                                    <tr className="border-t">
                                        <td className="py-2 px-3 text-sm">周日<br />7015<br />英超</td>
                                        <td className="py-2 px-3 text-sm">埃弗顿<br />2:1<br />水晶宫</td>
                                        <td className="py-2 px-3 text-sm">胜平负</td>
                                        <td className="py-2 px-3 text-sm text-red-500">胜(2.50)</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default ListDetail;